前言

arrow function(箭頭函式) 是 ES6 最重要的改變之一，不但簡化函式的宣告語法，也重新規定函式中的 this 指向的對象，而不會再根據呼叫函式的方式而有所差異，解決 JavaScript 學習者或開發者的痛點。

函示宣告的語法變化

先來看看過去我們如何宣告函式：

function 函式名稱(參數1, 參數2, ...) {
  函式內容
}

其實我們也可以這樣宣告函式：

const 變數名稱 = function(參數1, 參數2, ...) {
  函式內容
}

其中 function() {} 稱為匿名函式，因為它是一個不具名稱的函式。我們將它賦值給一變數，該變數名稱就成為此函式的名稱。

再來看看使用箭頭函式宣告函式的方法：

const 函式名稱 = (參數1, 參數2, ...) => {
  函式內容
}

其實箭頭函式 () => {} 只是匿名函示 fuction() {} 的變體，差別在於：將 () 前的 function 關鍵字拿掉，並且在 () 和 {} 中間加入箭頭 => 而已。

arrow function 的語法簡化

arrow function 不僅僅只是變體而已，在某些使用情境下能夠將其語法簡化。

函式只有一個參數時，可以省略()

省略前：

const square = (number) => {
  return number * number
}

省略後：

const square = number => {
  returnn number * number
}

函式內容若有返回值且只有一行時，可以省略 {} 和 return

省略前：

const add = (a, b) => {
  return a + b
}

省略後：

const add = number => a + b

注意：如果返回值為一個物件實字，必須用 () 包起來，避免物件的 {} 和函式主體的 {} 混淆而出現錯誤：

const getProduct = () => ({ name: 'food', price: 100 })

總結

arrow fuction 簡化函式宣告的語法，也重新定義函式中 this 指向對象的規則，由於後面介紹到 React 時將搭配 hooks API，僅使用函式元件而不會使用到類別元件，因此這邊就不特別深入探討有關 this 的概念囉！